// 分享直播
.page-share{
	& .bar{
		padding:0;
		height:3.5rem;
		background:none;
		& .fixtop{
			width: 100%;
			padding:.65rem .75rem;
			color: #fff;
			z-index: 99;
		    background-color: transparent;
		    background-color: rgba(0,0,0,.5);
		    & a{
				color: #fff;
			}
			&:after{
				content: "";
				display: block;
				clear: both;
			}
			& .logo{
				width: 2.2rem;
				height: 2.2rem;
				border-radius: .5rem;
				margin-right: .5rem;
			}
			& h1{
				font-size: .75rem;
				letter-spacing: .1rem;
			}
			& h2{
				font-size: .5rem;
			}
			& .downnowbox{
				border: 1px solid #fff;
				border-radius: 1rem;
				& .downnow{
					display: block;
					width: 4rem;
					height: 1.8rem;
					line-height: 1.8rem;
					text-align: center;
					margin: 1px;
					border-radius: .9rem;
					border: 1px solid #9E9E9E;
					color: #9E9E9E;
					background-color: rgba(0,0,0,.2);
				}
			}
		}
	}
	& .content{
		top:0;
		& .headimg{
			&:before{
				content: "";
				display: block;
				width: 100%;
				padding-top: 100%;
			}
			position: relative;
			width: 100%;
			overflow: hidden;
			& img.img{
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}
			& .playingbox{
				position: absolute;
				z-index: 2;
				width: 100%;
				left: 0;
				top: 0;
				padding-top:3.5rem;
				& .btnplaying{
					margin: 3rem auto;
					margin-top: 8rem;
					width: 2.5rem;
					height: 2.5rem;
					line-height: 2.5rem;
					text-align: center;
					border-radius: 50%;
					color: #fff;
					border: 2px solid #878383;
				    background-color: transparent;
				    background-color: rgba(0,0,0,.3);
				    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#000000);
				    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000,endColorstr=#000)";
				    & .iconfont{
						font-size: 1.6rem;
					  	vertical-align: top;
					  	line-height: 1;
					  	margin-top: 0.35rem;
					}
				}
			}
			& .playoverbox{
				display:none;
				position: absolute;
				z-index: 2;
				width: 100%;
				height: calc(100% + 1.75rem);
				left: 0;
				top: 0;
				padding-top:50%;
				margin-top:-1.75rem;
				text-align: center;
				color: #fff;
			    background-color: transparent;
			    background-color: rgba(0,0,0,.3);
			    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#000000);
			    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000,endColorstr=#000)";
			    & h1{
					font-size: 1rem;
					color:#8ee2d3; 
					font-weight: normal;
					line-height: 2.5rem;
					position: relative;
					&:after{
						content: "";
						display: block;
						width: 60%;
						border-bottom: 1px solid #fff;
						position: absolute;
						bottom: 0;
						left: 20%;
					}
				}
				& h2{
					font-size: .75rem;
					font-weight: normal;
					line-height: 1.5rem;
				}
			}
			& .playoverbox1{padding-top:0;display:block;}
		}
		& .playover{
			& .playingbox{display:none;}
			& .playoverbox{display:block;}
		}
		& .userinfo{
			background: #fff;
			width: 100%;
			padding:.5rem .75rem;
			margin-bottom: .3rem;
			&:after{
				content: "";
				display: block;
				clear: both;
			}
			& .img{
				width: 2.5rem;
				height: 2.5rem;
				border-radius: 50%;
				margin-right: .75rem;
			}
		}
		& .userdetail h1{
			font-size: .8rem;
			padding-top: .2rem;
		}
		& .userdetail h2{
			font-size: .5rem;
			color: #7f7f7f;
		}
		& .buttons-tab{
			width:100%;
			overflow:hidden;
			& .button{
				height: 3rem;
				line-height: 3rem;
				border:0;
			  	border-bottom: 2px solid transparent;
			  	color: #7f7f7f;
			}
			& .button.active {
			    color:#8ee2d3;
			    border-color:#8ee2d3;
			    margin:0 -1px;
			}
		}
		& .playback{
			background: #fff;
			width: 100%;
			padding: .75rem;
			margin-bottom: .1rem;
			&:after{
				content: "";
				display: block;
				clear: both;
			}
			& .img{
				width: 2.5rem;
				height: 2.5rem;
				border-radius: 50%;
				margin-right: .75rem;
			}
			& .userdetail{
				& h1{
					font-size: .75rem;
					padding-top: .2rem;
					& span{
						color: #7f7f7f;
						font-size: .5rem;
					}
				}
				& h2{
					font-size: .48rem;
					color: #7f7f7f;
					& span{
						color: #fff;
						font-size: .5rem;
						background: #8ee2d3;
						display: inline-block;
						padding: .1rem .5rem;
						margin-top: .1rem;
						border-radius: .1rem;
					}
				}
			}
			& .fansnum{
				color: #7f7f7f;
				font-size: .6rem;
				line-height: 1.5rem;
				& i{
					margin-right: .2rem;
					font-size: 1rem;
				}
			}
		}
		& .newrow{
			padding: .2rem;
			&:after{
				content: "";
				display: block;
				clear: both;
			}
			& .col-50{
				padding: .2rem;
				width: 50%;
				float: left;
				& .card{
					margin: 0;
					box-shadow:none;
					& .card-content-inner{
						padding: .3rem;
						& p{
							line-height: 1rem;
							height: 2rem;
							white-space: inherit;
							display: -webkit-box;
							-webkit-box-sizing: border-box;
							word-break: break-all;
							word-wrap: break-word;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							text-overflow: ellipsis;
							overflow: hidden;
							font-size: .5rem;
						}
					}
				}
			}
		}
		& .no_history{
			margin:3.5rem 0;
			text-align:center;
			color:#cad3d7;
			& .iconfont{
				font-size:3.5rem;
				color:#cbd4d8;
				line-height:1;
			}
		}
	}
}
img {
    display: block;
    width: 100%;
    height: 100%;
}
.live_tip .ico_play, .pop_download .btn_down:before, .ico_wechat, .ico_friend, .ico_weibo, .ico_qzone, .hot_item .player_info .see:after,
.pop_share .btn_close, .pop_toapp_box .pop_close, .pop_iostip_box .pop_close, .share_panel2 .des:before, .live_tip .btn_flesh:before,
.ico_female, .ico_male { background-image: url(../images/spr_main.png); background-repeat: no-repeat; background-size: 250px; }

.btn_openapp, .combofit, .pop_download .appdt, .btn_t_app, .pop_download .btn_down, .live_tip, .live_tip  .msg_lt,
.anchor_card .texwrap, .anchor_card .opts, .anchor_card .btn_fc  { display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column;flex-direction: column; }

.pop_download { position: fixed; right: 0; bottom: 0; left: 0; box-sizing: border-box; width: 100%; height: 36px; background: rgba(0, 0, 0, .8); z-index: 100; }
.pop_download_m { display: block; box-sizing: border-box; width: 100%; height: 36px; padding: 5px 10px; }
.pop_download .appdt { position: relative; height: 26px; padding-left: 31px; color: #fff; line-height: 1.3; font-size: 10px; }
.pop_download .appdt .logo { position: absolute; left: 0; top: 0; width: 26px; height: 26px; }
.pop_download .appdt .logo img { display:block; width:100%; height:100%; }
.pop_download .btn_down { position: absolute; right: 10px; top: 50%; margin-top: -13px; width: 90px; height: 26px; line-height: 26px; border-radius: 26px; background-color: #fff000; color: #000; text-align: center; font-size: 12px; }
.pop_download.intop {  bottom: auto; top: 0; }

.live_room { position: relative; overflow: hidden; }

.live_tip { position: relative; box-sizing: border-box; height: 320px; background: #fff; color: #fff; font-size: 11px; text-align: center; }
.live_tip .msg_lt .tit { margin-bottom: 2px; font-size: 20px; }
.live_tip .btn_flesh { display: block; height: 32px; line-height: 32px; margin: 72px 9px 0; border: 1px solid #fff; text-align: center; color: #fff; }
.live_tip .btn_flesh:before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 6px; background-position: -100px -125px; vertical-align: middle; }
.live_tip .img_lt { width: 100%; height: 100%; }
.live_tip .img_lt img { display: block; width: 100%; height: 100%; }
.live_tip .msg_lt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); }
.live_tip .msg_lt .lnk_goto { margin-top: 2px; font-size: 11px; color: #fff000; text-decoration: underline; }
.live_tip .ico_play { display: block; width: 90px; height: 90px; margin: 0 auto; background-position: 0 -200px; }

.live_info { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 10px; pointer-events:none; }
.live_info_hd { position: relative; color: #fff; pointer-events: auto; }
.live_info_hd .player { float: left; }
.live_info_hd .player_dt { position: relative; height: 34px; padding-right: 5px; border-radius: 34px; font-size: 10px; background: rgba(0, 0, 0, .8); }

.player_dt .avatar { display: inline-block; width: 34px; height: 34px; border-radius: 100%; vertical-align: middle; }
.player_dt .avatar img { border-radius: 100%; }
.player_dt .info { display: inline-block; max-width: 70px; vertical-align: middle; line-height: 1.2; color: #bababa; }
.player_dt .name { font-size: 11px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.player_dt  .btn_focus { display: inline-block;  width: 48px; height: 22px; line-height: 20px; padding-top: 2px; border-radius: 22px; background-color: #fff000; color: #000; font-size: 11px; text-align: center; vertical-align: middle; overflow: hidden; } 
.player_oth { float: left; box-sizing: border-box; height: 16px; line-height: 13px; font-size:13px; padding: 2px 8px; margin-top: 10px; border-radius: 16px; background: rgba(0, 0, 0, .8); color: #fff000; display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: row;flex-direction: row; }
.player_oth .num { padding: 0 4px; color: #fff; }

.live_info_bd { position: absolute; bottom: 10px; left: 10px; right: 10px; }

.chat_box { margin: 17px 70px 8px 0; }
.chat_list { height: 150px;  overflow: hidden; }
.chat_list li { margin-bottom: 3px; }
.chat_list li p { display: inline-block; box-sizing: border-box; line-height: 16px; padding: 2px 0; border-radius: 20px; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .75); word-break: break-all; }
.chat_list li .notice { color: #fc687c; }
.chat_list li p .name { margin-right: 4px; color: #e9aa39; }
.chat_list li p .gift_pic { display: inline-block; width: 18px; height: 18px; margin: -2px 0 0 4px; vertical-align: middle; }
.chat_list li p .name .ico_level { margin-right: 2px; }

.nav_wp { position: relative; pointer-events: auto; }
.share_btns { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-flex-direction: column; flex-direction: row; }
.nav_list { height: 34px; }
.nav_list li { position: relative; width: 34px; float: left; margin-right: 27px; }
.nav_list li .bt { display: block; width: 34px; height: 34px; border-radius: 100%; background-color: #fff; }
.plus_box i { position: absolute; top: -20px; left: 0; width: 34px; font-size: 15px; color: #f80073; text-shadow: 0 0 1px #fff; text-align: center; -webkit-animation: FadeUp 2s 1s ease-in both; animation: FadeUp 2s 1s ease-in both; }

.btn_openapp { position: absolute; top: 0; right: 0; height: 34px; border-radius: 34px; padding: 0 15px 0 40px; background: rgba(0, 0, 0, .5); text-align: center; font-size: 7px; color: #fff; transition: .2s transform; }
.btn_openapp .logo { position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 100%; overflow: hidden; background: #fff; }
.btn_openapp .logo img { display: block; width: 100%; border-radius: 100%; }
.btn_openapp p { color: #fff; }
.btn_openapp .tex_hi { font-size: 10px; color: #fff000; }
.btn_openapp:active { transform: scale(.98); color: #fff; }

@-webkit-keyframes FadeUp { 100% { opacity: 0; -webkit-transform: translateY(-600%); } }
@keyframes FadeUp { 100% { opacity: 0; transform: translateY(-600%); } }

.ico_chat, .ico_share, .ico_gift, .ico_full, .ico_suo, .ico_like { display: block; width: 34px; height: 34px; border-radius: 100%; background-repeat: no-repeat; background-position: center center; background-size: 100%; }
.ico_chat { background-image: url(../images/ico_chat.png); }
.ico_share { background-image: url(../images/ico_share.png); }
.ico_gift { box-sizing: border-box; border: 1px solid #fff000; background-image: url(../images/ico_gift.png); }
.ico_full { background-image: url(../images/ico_full.png); }
.ico_suo { background-image: url(../images/ico_suo.png); }
.ico_like { background-image: url(../images/ico_like.png); }

.pop_wp { position:fixed; left:0; top:0; bottom:0; right:0; padding: 0 1.8rem; background-color: rgba(0, 0, 0, .5); display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; -webkit-box-align: center; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-flex-direction: column;flex-direction: column; z-index:1000;}
.pop_box { position: relative; }
.pop_toapp_box .pop_close, .pop_iostip_box .pop_close { position: absolute; top: 0; right: 0; width: 30px; height: 30px; background-position: 5px -120px;  z-index: 10; }
.pop_toapp_box .pop_panel { box-sizing: border-box; width: 247px; height: 299px; padding-top: 135px; background: #fff url(../images/toapp_bg.jpg) no-repeat 0 0; background-size: 100%; text-align: center; }
.pop_toapp_box .logo { width: 50px; height: 50px; margin: 0 auto; }
.pop_toapp_box .name { margin-top: 5px; font-size: 13px; }
.pop_toapp_box .des { margin-top: 7px; color: #595757; font-size:12px; }
.pop_toapp_box .btn_app { margin-top: 20px; height: 30px; line-height: 30px; }

.endplay_panel .downapp { margin-top: 145px; }
.btn_app, .endplay_panel .downapp .btn_back { display: block; box-sizing: border-box; height: 35px; line-height: 35px; margin: 0 18px; color: #000; text-align: center; transition: .2s; }
.btn_app:active, .endplay_panel .downapp .btn_back:active { transform: scale(.98); }
.btn_app {font-size: 12px;margin-top: 7px;background-color: #ecc802;}
.btn_app:after { content: ""; display: inline-block; width: 15px; height: 14px; margin-left: 4px;  background: url(../images/ico_down.png) no-repeat center center; background-size: 100%; vertical-align: -3px; }
.endplay_panel .downapp .btn_back { margin-top: 17px; border: 1px solid #000; background-color: #fff; }
.btn_app_open:after { width: 14px; height: 14px; background-image: url(../images/ico_open_b.png); }
